<template>
  <div ref="divDrawToHide" v-if="visible" style="height: 100%">
    <div v-if="!divDrawData.showData" class="drawer" style="text-align: center">
      <div style="position: relative; top: 50%">
        选择一个文件或文件夹 <br />
        可查看其属性和日志
      </div>
    </div>
    <div v-else class="drawer">
      <div class="file-name" style="display: flex">
        <img
          v-if="getFileTypeIcon(divDrawData.fileAttribute.fileName, divDrawData.fileAttribute.fileType).useImage"
          class="file-icon"
          :src="getFileTypeIcon(divDrawData.fileAttribute.fileName, divDrawData.fileAttribute.fileType).image"
          :preview="false"
        />
        <Icon
          v-else
          :icon="getFileTypeIcon(divDrawData.fileAttribute.fileName, divDrawData.fileAttribute.fileType).icon"
          class="file-icon"
          :style="getFileTypeIcon(divDrawData.fileAttribute.fileName, divDrawData.fileAttribute.fileType).style"
        />
        <span class="attribute-name ellipsis">{{ divDrawData.fileAttribute.fileName }}</span>
      </div>
      <div class="tabs">
        <ul style="padding-bottom: 15px; width: 100%">
          <li :class="divDrawData.showType == '1' ? 'click-color' : ''" @click="handleDrawTypeClick('1')">属性 </li>
          <li :class="divDrawData.showType == '2' ? 'click-color' : ''" @click="handleDrawTypeClick('2')">日志 </li>
        </ul>
      </div>
      <div class="basic" :style="divDrawData.showType == '1' ? '' : 'display: none'">
        <ul>
          <li class="ellipsis flex">
            <span class="basic-font">创&nbsp;&nbsp;建&nbsp;&nbsp;者</span>
            <span class="ellipsis flex">
              <img :src="divDrawData.fileAttribute.avatar" class="avatar-box" /> <span>{{ divDrawData.fileAttribute.realname }}</span>
            </span>
          </li>
          <li class="ellipsis flex">
            <span class="basic-font">类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型</span>
            <span class="ellipsis flex">{{ divDrawData.fileAttribute.fileTypeName }}</span>
          </li>
          <li class="ellipsis flex">
            <span class="basic-font">存储位置</span> <span class="ellipsis flex">{{ divDrawData.fileAttribute.pathName }}</span>
          </li>
          <li class="ellipsis flex">
            <span class="basic-font">创建时间</span> <span>{{ divDrawData.fileAttribute.createTime }}</span>
          </li>
          <li class="ellipsis flex">
            <span class="basic-font">最近修改</span> <span>{{ divDrawData.fileAttribute.updateTime }}</span>
          </li>
          <li class="ellipsis flex">
            <span class="basic-font">浏&nbsp;&nbsp;览&nbsp;&nbsp;数</span> <span>{{ divDrawData.fileAttribute.readCount }}</span>
          </li>
          <li class="ellipsis flex">
            <span class="basic-font">下&nbsp;&nbsp;载&nbsp;&nbsp;数</span> <span>{{ divDrawData.fileAttribute.downCount }}</span>
          </li>
          <li class="ellipsis flex">
            <span class="basic-font">分享链接</span>
            <a-input v-model:value="divDrawData.fileAttribute.shareUrl" style="height: 25px !important; margin-top: 5px" />
          </li>
        </ul>
        <a-divider />
        <div style="margin-top: 10px; height: 60px">
          <div class="ellipsis flex">
            <span class="basic-font">允许下载</span>
            <a-switch v-model:checked="divDrawData.fileAttribute.enableDown" size="small" @change="handleEnableDownChange" />
          </div>
          <div class="ellipsis flex" style="margin-top: 10px; margin-bottom: 10px">
            <span class="basic-font">允许编辑</span>
            <a-switch v-model:checked="divDrawData.fileAttribute.enableUpdate" size="small" @change="handleEnableUpdateChange" />
          </div>
        </div>
        <a-divider />
        <div style="margin-top: 10px; height: 100px">
          <div class="ellipsis flex"> <span class="basic-font">分享链接预览权限</span> </div>
          <div>
            <a-radio-group v-model:value="divDrawData.fileAttribute.sharePerms" @change="handleSharePermsChange">
              <a-radio style="display: flex; height: 30px; line-height: 30px; font-size: 13px" value="1">关闭分享</a-radio>
              <a-radio style="display: flex; height: 30px; line-height: 30px; font-size: 13px" value="3">允许任何人查看</a-radio>
            </a-radio-group>
          </div>
        </div>
      </div>
      <div class="log" :style="divDrawData.fileAttribute.showType != '1' ? '' : 'display: none'">
        <ul class="log-detail-list">
          <li v-for="(item, index) in divDrawData.fileLogs" :key="item.id" class="ellipsis">
            <Icon
              v-if="item.dataContent.type == 'add'"
              icon="ant-design:plus-outlined"
              class="icon-edit"
              style="font-size: 16px; display: inline-flex"
            />
            <Icon v-else icon="ant-design:edit-outlined" class="icon-edit" style="font-size: 16px; display: inline-flex" />
            <div style="word-break: break-all; white-space: break-spaces">
              <a-popover placement="top" overlayClassName="file-popover">
                <template #content>
                  <div class="ant-popover-inner-content">
                    <div class="ant-popover-inner-content-avatar">
                      <a-avatar :src="item.avatar" :size="47" />
                    </div>
                    <div class="ant-popover-inner-content-info">
                      <div class="ant-popover-inner-content-info-bold">
                        {{ item.realname }}
                      </div>
                      <div class="ant-popover-inner-content-info-other">
                        {{ item.mobile }}
                      </div>
                    </div>
                  </div>
                </template>
                <a>{{ item.realname }}</a>
              </a-popover>
              <span v-if="item.dataContent.type == 'add'">
                创建了 {{ item.dataContent.isFolder == '1' ? '文件夹' : '文件' }} {{ item.dataContent.fileName }}
              </span>
              <span v-else-if="item.dataContent.type == 'move'">
                移动此 {{ item.dataContent.isFolder == '1' ? '文件夹' : '文件' }} 到 {{ item.dataContent.toFolderName }}
              </span>
              <span v-else-if="item.dataContent.type == 'copy'">
                复制此 {{ item.dataContent.isFolder == '1' ? '文件夹' : '文件' }} 到 {{ item.dataContent.toFolderName }}
              </span>
              <span v-else-if="item.dataContent.type == 'rename'">
                重命名了 {{ item.dataContent.isFolder == '1' ? '文件夹' : '文件' }} {{ item.dataContent.oldFileName }} 为
                {{ item.dataContent.newFileName }}
              </span>
            </div>
            <div class="detail-log-time">
              {{ getLogTime(item.createTime) }}
            </div>
          </li>
        </ul>
      </div>
      <div class="hold">
        <a-checkbox v-model:checked="divDrawData.keepExpand" style="font-size: 13px; margin-left: 10px">保持展开</a-checkbox>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, onMounted, onUnmounted, watch } from 'vue';
  import { getFileDetail, getDetailLog, saveOrUpdate } from '../files.api';
  import { getFileTypeIcon } from '../files.data';
  import moment from 'moment/moment';
  import 'moment/locale/zh-cn';

  export default defineComponent({
    name: 'FileAttribute',
    components: {},
    emits: ['opened', 'closed'],
    setup(props, { emit }) {
      // 窗口显隐标记
      const visible = ref(false);
      // 窗口对象
      const divDrawToHide = ref();
      // 属性Draw内容
      const divDrawData = reactive({
        //显示内容
        showData: true,
        //保持展开
        keepExpand: false,
        // 显示内容 1为属性  2为日志
        showType: '1',
        fileId: '',
        fileAttribute: {},
        fileLogs: [],
      });

      onMounted(() => {
        document.addEventListener('click', (e) => handleClickOutside(e));
      });

      onUnmounted(() => {
        document.removeEventListener('click', (e) => handleClickOutside(e));
      });

      // visible 变化，通知
      watch(
        () => visible,
        async () => {
          if (visible.value) {
            emit('opened');
          } else {
            emit('closed');
          }
        },
        { deep: true, immediate: true }
      );

      watch(
        () => divDrawData.fileId,
        async () => {
          if (divDrawData.fileId && divDrawData.fileId.length > 0) {
            divDrawData.showData = true;
          } else {
            divDrawData.showData = false;
          }
        },
        { deep: true, immediate: true }
      );

      // 监听弹框标签外的点击事件，弹框外的点击事件可隐藏当前的弹框
      const handleClickOutside = (e) => {
        //console.log('e', e, divDrawToHide.value?.contains(e.target), visible.value);
        if (!divDrawData.keepExpand && visible.value && !divDrawToHide.value?.contains(e.target)) {
          visible.value = false;
        }
      };

      /**
       * 属性与日志切换
       * 1 属性  2日志
       */
      async function handleDrawTypeClick(type) {
        divDrawData.showType = type;
        if (type == '1') {
          const data = await getFileDetail({ fileId: divDrawData.fileId });
          if (data) {
            divDrawData.fileAttribute.fileName = data.fileName;
            divDrawData.fileAttribute.fileType = data.fileType;
            if (data.isFolder == '1') {
              divDrawData.fileAttribute.fileTypeName = '文件夹';
            } else {
              const index = data.fileName.lastIndexOf('.');
              if (index >= 0) {
                divDrawData.fileAttribute.fileTypeName = data.fileName.substring(index + 1);
              } else {
                divDrawData.fileAttribute.fileTypeName = '未知';
              }
            }
            divDrawData.fileAttribute.fileUrl = data.url;
            divDrawData.fileAttribute.avatar = data.avatar;
            divDrawData.fileAttribute.realname = data.realname;
            divDrawData.fileAttribute.pathName = data.pathName;
            divDrawData.fileAttribute.createTime = data.createTime;
            divDrawData.fileAttribute.updateTime = data.updateTime;
            divDrawData.fileAttribute.readCount = data.readCount;
            divDrawData.fileAttribute.downCount = data.downCount;
            divDrawData.fileAttribute.enableDown = data.enableDown == 1;
            divDrawData.fileAttribute.enableUpdate = data.enableUpdate == 1;
            divDrawData.fileAttribute.shareUrl = data.shareUrl;
            divDrawData.fileAttribute.sharePerms = data.sharePerms;
          } else {
            divDrawData.fileAttribute.fileName = '';
            divDrawData.fileAttribute.fileType = '';
            divDrawData.fileAttribute.fileTypeName = '';
            divDrawData.fileAttribute.fileUrl = '';
            divDrawData.fileAttribute.avatar = '';
            divDrawData.fileAttribute.realname = '';
            divDrawData.fileAttribute.pathName = '';
            divDrawData.fileAttribute.createTime = '';
            divDrawData.fileAttribute.updateTime = '';
            divDrawData.fileAttribute.readCount = '';
            divDrawData.fileAttribute.downCount = '';
            divDrawData.fileAttribute.enableDown = false;
            divDrawData.fileAttribute.enableUpdate = false;
            divDrawData.fileAttribute.shareUrl = '';
            divDrawData.fileAttribute.sharePerms = '';
          }
          //console.log('wang', divDrawData.fileAttribute);
        } else if (type == '2') {
          divDrawData.fileLogs = await getDetailLog({ fileId: divDrawData.fileId });
          divDrawData.fileLogs.forEach((item) => {
            item.dataContent = JSON.parse(item.dataContent);
          });
        }
      }

      async function handleSharePermsChange(e) {
        //console.log('radio checked', e.target.value);
        await saveOrUpdate(
          {
            id: divDrawData.fileId,
            sharePerms: e.target.value,
          },
          true
        );
      }

      async function handleEnableDownChange(checked) {
        //console.log(`a-switch to ${checked}`);
        await saveOrUpdate(
          {
            id: divDrawData.fileId,
            enableDown: checked ? '1' : '0',
          },
          true
        );
      }

      async function handleEnableUpdateChange(checked) {
        //console.log(`a-switch to ${checked}`);
        await saveOrUpdate(
          {
            id: divDrawData.fileId,
            enableUpdate: checked ? '1' : '0',
          },
          true
        );
      }

      function getLogTime(val) {
        if (moment(val).isSame(moment(), 'day') || moment(val).isSame(moment().subtract(1, 'days'), 'day')) {
          return moment(val).calendar();
        } else {
          return val;
        }
      }

      //显示
      function show() {
        visible.value = true;
        divDrawData.fileId = '';
      }

      //隐藏
      function hide() {
        if (!divDrawData.keepExpand) {
          visible.value = false;
          divDrawData.fileId = '';
          return true;
        }
        return false;
      }

      //设置数据
      function setData(fileId) {
        if (!visible.value) {
          return;
        }
        divDrawData.fileId = fileId;
        if (fileId && fileId.length > 0) {
          handleDrawTypeClick('1');
        }
      }

      return {
        visible,
        divDrawToHide,
        divDrawData,
        show,
        hide,
        setData,
        getFileTypeIcon,
        handleDrawTypeClick,
        handleSharePermsChange,
        handleEnableDownChange,
        handleEnableUpdateChange,
        getLogTime,
      };
    },
  });
</script>

<style lang="less" scoped>
  @import '../less/FileAttribute';
  @import '../less/FileLog';
</style>
